<template>
    <div>
        <Card>
            <!-- search start -->
            <div class="search_div">
                <div class="add">
                    <Button v-if="role < 3 " size="default" icon="md-add" type="primary" @click="modal = true">新增题库</Button>
                    <Button v-if="role < 3 " size="default" icon="md-download" type="success" @click="downTmp" style="margin-left:10px"> 下载模板 </Button>
                </div>

                <Form :model="search" class="search_box" inline label-position="right">
                    <FormItem label="题库名称：">
                        <Input v-model="search.username"></Input>
                    </FormItem>

                    <FormItem>
                        <Button icon="md-search" type="primary" @click="searchList">搜索</Button>
                    </FormItem>
                </Form>

            </div> <!-- end search -->

            <Table ref="table" :loading="loading" stripe :columns="columns1" :data="data1"></Table>
            <Page :total="total" :current="search.page" show-sizer show-total :page-size="search.rows" @on-page-size-change="getListByPageSize" @on-change="getListByPageNum"> </Page>
        </Card>

        <!-- modalAdd start -->
        <Modal v-model="modal" title="新增题库" :mask-closable="false" @on-cancel="close">
            <Form :label-width="140" :model="formItem">
                <FormItem label="题库名称：">
                    <Input v-model="formItem.name" style="width:15vw"></Input>
                </FormItem>

                <FormItem label="备注：">
                    <Input v-model="formItem.remark" style="width:15vw"></Input>
                </FormItem>

                <FormItem label="题库文件：">
                    <div class="importExcel">
                        <Button size="default" icon="md-cloud-upload" type="warning">上传文件</Button>
                        <input class="imBtn" type="file" @change="upFile($event)" accept=".cvs,.xls,.xlsx">
                        <p> {{fileName}} </p>
                    </div>
                </FormItem>
            </Form>

            <footer class="modalFooter" slot="footer">
                <Button type="default" @click="close">取消</Button>
                <Button type="primary" @click="save">保存</Button>
            </footer>
        </Modal>

        <Modal v-model="modal2" title="修改题库" :mask-closable="false" @on-cancel="close">
            <Form :label-width="140" :model="formItemEdit">
                <FormItem label="题库名称：">
                    <Input v-model="formItemEdit.name" style="width:15vw"></Input>
                </FormItem>

                <FormItem label="备注：">
                    <Input v-model="formItemEdit.remark" style="width:15vw"></Input>
                </FormItem>
            </Form>
            <footer class="modalFooter" slot="footer">
                <Button type="default" @click="close">取消</Button>
                <Button type="primary" @click="edit">保存</Button>
            </footer>
        </Modal>
    </div>
</template>

<script>
    import {
        mapGetters,
        mapMutations
    } from 'vuex'
    import axios from '@/libs/api.request'
    import config from '@/config'
    import Cookies from 'js-cookie'
    export default {
        name: 'question-page',
        data() {
            return {
                loading: false,

                modal: false,
                modal2: false,

                // 搜索对象
                search: {
                    name: '',
                    page: 1,
                    rows: 10
                },

                // 新增对象
                formItem: {
                    name: '',
                    remark: ''
                },

                // 修改对象
                formItemEdit: {},

                // 文件对象
                fileData: '',
                fileName: '请选择文件',

                // 数据总条数
                total: 0,

                columns1: [{
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '题库名称',
                        align: 'center',
                        key: 'name'
                    },
                    {
                        title: '备注',
                        align: 'center',
                        key: 'remark'
                    },
                    {
                        title: '创建时间',
                        align: 'center',
                        key: 'c_time'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 340,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'default',
                                        icon: 'ios-eye'
                                    },
                                    style: {
                                        marginRight: '14px',
                                        height: '30px'
                                    },
                                    on: {
                                        click: () => {
                                            this.myClose('question-detail')
                                            this.$_changePage('question-detail', '题库详情', {
                                                id: params.row.id
                                            })
                                        }
                                    }
                                }, '查看题库'),
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'default',
                                        icon: 'md-brush',
                                        disabled: this.role > 2
                                    },
                                    style: {
                                        marginRight: '14px',
                                        width: '80px',
                                        height: '30px'
                                    },
                                    on: {
                                        click: () => {
                                            if (this.role > 2) {
                                                return false
                                            }
                                            this.formItemEdit = {
                                                name: params.row.name,
                                                remark: params.row.remark,
                                                ckid: params.row.id
                                            }
                                            this.modal2 = true
                                        }
                                    }
                                }, '编辑'),
                                h('Poptip', {
                                        props: {
                                            confirm: true,
                                            title: '你确定要删除吗?',
                                            placement: 'top',
                                            transfer: true
                                        },
                                        on: {
                                            'on-ok': () => {
                                                if (this.role > 1) {
                                                    return false
                                                }
                                                this.deleteByid(params.row.id)
                                            }
                                        }
                                    },
                                    [h(
                                        'Button', {
                                            props: {
                                                type: 'error',
                                                size: 'default',
                                                icon: 'ios-trash',
                                                disabled: this.role > 1
                                            },
                                            style: {
                                                marginRight: '14px',
                                                width: '80px',
                                                height: '30px'
                                            }
                                        },
                                        '删除'
                                    )]
                                )
                            ])
                        }
                    }

                ],
                data1: []
            }
        },
        methods: {
            ...mapGetters(['getRole']),
            ...mapMutations(['myClose']),

            // 获取题库列表
            getQuestionList() {
                this.loading = true
                let {
                    ...data
                } = this.search
                axios.ajax_post('admin-class_ku-ajax_get_ck', data).then(res => {
                    this.loading = false
                    if (res.data.code === 1) {
                        this.data1 = res.data.data.list
                        this.total = res.data.data.total_num

                        if (this.data1.length < 1 && this.total > 0) {
                            this.search.page = Math.ceil(this.total / this.search.rows)
                            this.getQuestionList()
                        }
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })

            },

            // 搜索
            searchList() {
                this.search.page = 1
                this.search.rows = 10
                this.getQuestionList()
            },

            // 下载模板
            downTmp() {
                location.href = config.conf.download_prefix + 'template/classti_template.xlsx'
            },

            // 选择文件
            upFile(e) {
                let file = e.target.files[0]
                this.fileData = new FormData()
                this.fileData.append('ti_file', file)
                this.fileName = file.name
            },

            // 保存
            save() {
                if (!this.fileData) {
                    this.$Notice.error({
                        title: '请选择题库文件',
                        duration: 3
                    })
                    return false
                }

                this.fileData.append('token', Cookies.get('token'))
                this.fileData.append('name', this.formItem.name)
                this.fileData.append('remark', this.formItem.remark)
                axios.uploadFileRequest('admin-class_ku-ajax_add_ck', this.fileData).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.modal = false
                        this.fileData = ''
                        this.fileName = '请选择文件'
                        this.getQuestionList()
                    } else {
                        this
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })

            },

            // 修改
            edit() {
                let data = this.formItemEdit
                axios.ajax_post('admin-class_ku-ajax_save_ck', data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.modal2 = false
                        this.getQuestionList()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            deleteByid(ckid) {
                axios.ajax_post('admin-class_ku-ajax_del_ck', {
                    ckid
                }).then(res => {
                    this.loading = false
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.getQuestionList()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            close() {
                this.modal = false
                this.modal2 = false
            },

            getListByPageSize(rows) {
                this.search.rows = rows
                this.getQuestionList()
            },

            getListByPageNum(page) {
                this.search.page = page
                this.getQuestionList()
            },
        },
        computed: {
            role() {
                return this.getRole()
            }
        },
        created() {
            this.getQuestionList()
        }
    }
</script>

<style lang='less' scoped>
    .search_div {
        .search_box {
            width: auto
        }
    }

    .add {
        margin-right: 20px;
    }

    .importExcel {
        position: relative;
        display: inline-block;

        .imBtn {
            position: absolute;
            left: 0;
            opacity: 0;
            width: 100px;
            height: 32px;
            z-index: 999;
        }
    }
</style>